<!doctype html>
<html>

<head>
  <title>Asset Management</title>
  <meta charset="utf-8">
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
</head>

<body>
  <header class="header">
    <div class="header-top">
      <div class="containers">
        <div class="left">
          <img src="../../images/tips.png" alt="">
          <span>优品汇售后退还无忧服务上线</span>
        </div>
        <div class="right">
          <a href="./login.html">请先登录&nbsp;&nbsp;| </a>
          <a href="./register.html">&nbsp;&nbsp;免费注册&nbsp;&nbsp;|</a>
          <a href="./myorder.html">&nbsp;&nbsp;我的订单&nbsp;&nbsp;|</a>
          <a href="./helpcenter.html">&nbsp;&nbsp;帮助中心&nbsp;&nbsp;|</a>
          <a href="">&nbsp;&nbsp;在线客服&nbsp;&nbsp;|</a>
          <a href="">
            <img src="../../images/phone.png" alt="">
            <span>手机版</span>
          </a>
        </div>
      </div>
    </div>
    <div class="header-bottom">
      <div class="containers">
        <img src="../../images/logo.png" alt="" class="logo">
        <div class="name">
          <div class="name-top">净水器</div>
          <div class="name-bottom">惠聚优质商品</div>
        </div>
        <ul>
          <li>
            <span class="active">
              <a href="./index.html">首页</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./waterpurifier.html">净水器</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./directlywater.html">直饮水</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./watercheck.html">水质查询</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./applyinstall.html">申请安装</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./applyfix.html">申请维修</a>
            </span>
          </li>
        </ul>
        <div style="position: relative;display: inline-block">
          <input type="text" placeholder="输入商品关键词">
          <img src="../../images/search.png" alt="" class="search-img" onclick="window.location.href='./search.html'">
        </div>
        <span class="mycar">
          <a href="./mycart.html">我的购物车</a>
        </span>
        <img src="../../images/bag.png" alt="" class="bag">
      </div>
    </div>
  </header>
  <div class="contents">
    <div class="breadCrumbs">
      <div class="containers">
        填写订单信息
      </div>
    </div>
    <div class="containers main">
      <div class="title flex space-between">
        <span>收货地址</span>
        <span class="change-address">修改地址</span>
      </div>
      <div class="address-board flex y-center space-between">
        <div class="left">
          <div>
            <span class="name labels">收货人：</span>
            <span class="value">大梨</span>
          </div>
          <div>
            <span class="labels">联系方式：</span>
            <span class="value">180****1846</span>
          </div>
          <div>
            <span class="labels">收货地址：</span>
            <span class="value">广东深圳市罗湖区清水河街道泥岗东路</span>
          </div>
        </div>
        <div class="right">
          <a href="">
            <img src="../../images/position.png" alt="" class="address-img">
            <span>切换地址</span>
          </a>
          <a href="" class="add">
            <img src="../../images/add2.png" alt="" class="add-img">
            <span>添加地址</span>
          </a>
        </div>
      </div>

      <div class="item-group">
        <div class="title">配送时间</div>
        <div class="board flex">
          <div class="active">
            <span class="labels">不限送货时间：</span>
            <span class="value">周一至周日</span>
          </div>
          <div>
            <span class="labels">工作日送货：</span>
            <span class="value">周一至周五</span>
          </div>
          <div>
            <span class="labels">双休日、假日送货：</span>
            <span class="value">周六至周日</span>
          </div>
        </div>
      </div>
      <div class="item-group">
        <div class="title">支付方式</div>
        <div class="board flex">
          <div class="active">
            <span class="value">在线支付</span>
          </div>
          <div>
            <span class="value">货到付款</span>
          </div>
          <span class="text">货到付款需付5元手续费，仅支持2000元以下订单</span>
        </div>
      </div>
      <div class="item-group">
        <div class="title">支付方式</div>
        <div class="board flex">
          <div class="flex y-center x-center">
            <span class="radios"></span>
            <span class="value">货到付款</span>
          </div>
        </div>
      </div>
      <div class="item-group">
        <div class="title">商品信息</div>
        <div class="tables">
          <div class="thead flex">
            <div class="product">
              商品信息
            </div>
            <div class="price">
              单价
            </div>
            <div class="num">
              数量
            </div>
            <div class="total">
              小计
            </div>
            <div class="pay">
              实付
            </div>
          </div>
          <div class="tr flex">
            <div class="product flex">
              <img src="../../images/product2.png" alt="">
              <div>
                <div class="name">史密斯热水器</div>
                <div class="specs">
                  <span>颜色：黑色 </span>&nbsp;&nbsp;
                  <span>型号：C88-90</span>
                </div>
              </div>
            </div>
            <div class="price flex y-center x-center">
              ￥249
            </div>
            <div class="num flex y-center x-center">
              1
            </div>
            <div class="total flex y-center x-center">
              ￥249
            </div>
            <div class="pay flex y-center x-center">
              ￥249
            </div>
          </div>
          <div class="tr flex">
            <div class="product flex">
              <img src="../../images/product2.png" alt="">
              <div>
                <div class="name">史密斯热水器</div>
                <div class="specs">
                  <span>颜色：黑色 </span>&nbsp;&nbsp;
                  <span>型号：C88-90</span>
                </div>
              </div>
            </div>
            <div class="price flex y-center x-center">
              ￥249
            </div>
            <div class="num flex y-center x-center">
              1
            </div>
            <div class="total flex y-center x-center">
              ￥249
            </div>
            <div class="pay flex y-center x-center">
              ￥249
            </div>
          </div>
          <div class="tr flex">
            <div class="product flex">
              <img src="../../images/product2.png" alt="">
              <div>
                <div class="name">史密斯热水器</div>
                <div class="specs">
                  <span>颜色：黑色 </span>&nbsp;&nbsp;
                  <span>型号：C88-90</span>
                </div>
              </div>
            </div>
            <div class="price flex y-center x-center">
              ￥249
            </div>
            <div class="num flex y-center x-center">
              1
            </div>
            <div class="total flex y-center x-center">
              ￥249
            </div>
            <div class="pay flex y-center x-center">
              ￥249
            </div>
          </div>
        </div>
      </div>

      <div class="item-group">
        <div class="title">使用积分</div>
        <div class="score flex space-between y-center">
          <div>
            <input type="text" placeholder="填写使用积分数量">
          </div>
          <span>共5990积分，（1积分=1元）</span>
        </div>
      </div>

      <div class="money-detail">
        <div class="title">金额明细</div>
        <div class="money-board">
          <span class="item">
            <div>
              <span class="labels">商品件数：</span>
              <span class="value">5件</span>
            </div>
            <div>
              <span class="labels">商品总价：</span>
              <span class="value">￥1245.00</span>
            </div>
            <div>
              <span class="labels">积分抵扣：</span>
              <span class="value">-￥500</span>
            </div>
            <div>
              <span class="labels">运费：</span>
              <span class="value">-￥0</span>
            </div>
            <div>
              <span class="labels">应付总额：</span>
              <span class="value all-money">￥1245.00</span>
            </div>
          </span>
        </div>
      </div>
    </div>
    <div class="containers submit-order flex y-center space-between">
      <div class="info">
        <p>
          <span class="name">小美花</span>
          <span>180****7542</span>
        </p>
        <p>广东省深圳市罗湖区泥岗东路</p>
      </div>
      <a href="">提交订单</a>
    </div>
  </div>




  <footer class="footer">
    <div class="footer-top containers flex space-between">
      <div class="item">
        <div class="title text-center">客户服务</div>
        <div class="flex space-between">
          <div class="img-group">
            <img src="../../images/serve.png" alt="" class="serve-img">
            <div>在线客服</div>
          </div>
          <div class="img-group">
            <img src="../../images/question.png" alt="" class="qusetion-img">
            <div>问题反馈</div>
          </div>
        </div>
      </div>
      <div class="item">

        <div class="title text-center">关注我们</div>
        <div class="flex space-between">
          <a class="img-group">
            <img src="../../images/wechat.png" alt="" class="weixin-img">
            <div>公众号</div>
          </a>
          <a class="img-group">
            <img src="../../images/webo.png" alt="" class="weibo-img">
            <div>微博</div>
          </a>
        </div>
      </div>
      <div class="item">
        <div class="title text-center">下载APP</div>
        <div class="flex space-between">
          <img src="../../images/20170104103647314.png" alt="" class="code">
          <div class="text-group">
            <div>扫描二维码查看</div>
            <div>移动版原型效果</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title text-center">下载APP</div>
        <div class="green text-center">400-0000-000</div>

        <div class="text-center date">周一至周日：8:00-18:00</div>
        <div class="text-center">(仅收市话费)</div>

      </div>
    </div>
    <div class="footer-bottom">
      <div class="containers advantage flex y-center space-between">
        <div class="item flex y-center">
          <img src="../../images/change.png" alt="">
          <span>30天无忧退换货</span>
        </div>
        <div class="item flex y-center">
          <img src="../../images/car.png" alt="">
          <span>满88元免邮费</span>
        </div>
        <div class="item flex y-center">
          <img src="../../images/save.png" alt="">
          <span>优品汇品质保证</span>
        </div>
      </div>

      <div class="link containers text-center">
        <a href="">&nbsp;&nbsp;关于我们&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;帮助中心&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;售后服务&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;配送与验收&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;商务合作&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;企业采购&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;开放平台&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;搜索推荐&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;友情链接&nbsp;&nbsp;</a>
      </div>

      <div class="copyright text-center">
        CopyRight @ 优品汇 2015 - 2017
      </div>
    </div>
  </footer>
</body>

</html>